<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>个人信息 - 可穿戴心电监测平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 font-sans min-h-screen">

  <!-- 顶部蓝色导航栏 -->
  <header class="bg-blue-600 text-white p-4 flex justify-between items-center shadow-md">
    <h1 class="text-xl font-semibold">👤 个人信息</h1>
    <a href="/logout" class="bg-white text-blue-600 px-3 py-1 rounded hover:bg-gray-100 transition">退出</a>
  </header>

  <!-- 主体内容 -->
  <div class="flex">
    <!-- 左侧导航 -->
    <aside class="w-64 bg-white h-screen shadow-md p-5">
      <nav class="space-y-3">
        <a href="/devices" class="block p-3 rounded hover:bg-blue-100 text-gray-700 font-medium">📟 设备管理</a>
        <a href="/ecg" class="block p-3 rounded hover:bg-blue-100 text-gray-700 font-medium">📈 心电数据</a>
        <a href="/profile" class="block p-3 rounded bg-blue-100 text-blue-600 font-medium">👤 个人信息</a>
      </nav>
    </aside>

    <!-- 右侧内容区 -->
    <main class="flex-1 p-8">
      <div class="bg-white shadow-lg rounded-2xl p-8 max-w-3xl mx-auto">
        <h2 class="text-2xl font-semibold text-blue-600 mb-6">我的资料</h2>

        <form action="/profile/update" method="post" class="space-y-5">
          <div>
            <label class="block text-gray-600 mb-2">用户名</label>
            <input type="text" value="{{ user.username }}" disabled
                   class="w-full border-gray-300 rounded-lg p-2 bg-gray-100 text-gray-600">
          </div>

          <div>
            <label class="block text-gray-600 mb-2">邮箱</label>
            <input name="email" type="email" value="{{ user.email or '' }}"
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400">
          </div>

          <div>
            <label class="block text-gray-600 mb-2">手机号</label>
            <input name="phone" type="text" value="{{ user.phone or '' }}"
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400">
          </div>

          <div>
            <label class="block text-gray-600 mb-2">修改密码</label>
            <input name="password" type="password" placeholder="输入新密码（留空不修改）"
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400">
          </div>

          <div class="flex justify-between items-center mt-8">
            <p class="text-sm text-gray-500">注册时间：{{ user.created_at }}</p>
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
              保存修改
            </button>
          </div>
        </form>
      </div>
    </main>
  </div>

  <!-- 固定右下角返回按钮 -->
  <a href="/"
     class="fixed bottom-6 right-6 bg-blue-600 text-white px-5 py-2 rounded-full shadow-lg hover:bg-blue-700 transition z-50">
    🔙 返回主页面
  </a>

</body>
</html>
